<template lang="pug">
    div(class="flex-column h3")
        div(class="flex-column-item flex-row")
            div(class="flex-row-item flex-center-center flex-7") {{title}}
            div(class="flex-row-item right") {{activeId+1}}
        div(class="flex-column-item flex-center flex-3") 
            div(class="flex-row")
                div(class="flex-row-item flex-4",style="height:100%")
                    div(class="flex-column")
                        div(class="flex-column-item flex-center" v-for="(menu,index) in currentPageMenus") 
                            span(class="iconfont",:style="{'visibility': index == currentMenuIndex ? 'visible' : 'hidden'}") &#xe62c;
                            span {{menu.name}}
                div(class="flex-row-item right",style="height:100%")
                    control-line(:total="menus.length",:current="activeId",style="float:right;")
</template>

<script>
    import MenuList from "@/mixins/MenuList";

    export default {
        mixins: [MenuList],
        data() {
            return {
                page: { maxResultCount: 3 }
            };
        },
        computed: {
            currentPageMenus() {
                var start = this.skipCount;
                var end = this.skipCount + this.page.maxResultCount;
                return this.menus.slice(start, end);
            }
        },
        props:{
            menus: { type:Array, default:[] },
            title: { type:String, default: ''}
        },
        methods: {
            up() {
                this.activeId --;
            },
            down() {
                this.activeId++;
            }
        }
    };
</script>

<style lang="less">
</style>
